<template>
  <p>
    <button @click="add">
      <i class="ace-icon fa fa-edit"></i>
      新增
    </button>
    &nbsp;
    <button @click="refresh">
      <i class="ace-icon fa fa-undo"></i>
      刷新
    </button>
  </p>
  <div class="row">
    <div v-for="teacher in teachers" class="col-md-2">
      <div>
          <span class="profile-picture">
            <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty"
                 src="/static/image/讲师头像/头像1.jpg" v-bind:title="teacher.intro"/>
            <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty"
                 :src="teacher.image" v-bind:title="teacher.intro"/>
          </span>

        <div class="space-4"></div>

        <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
          <div class="inline position-relative">
            <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
              <i class="ace-icon fa fa-circle light-green"></i>
              &nbsp;
              <span class="white">{{ teacher.position }}</span>
            </a>
          </div>
        </div>
      </div>

      <div class="space-6"></div>

      <div class="text-center">
        <a href="javascript:;" class="text-info bigger-110" v-bind:title="teacher.motto">
          <i class="ace-icon fa fa-user"></i>
          {{ teacher.name }}【{{ teacher.nickname }}】
        </a>
      </div>

      <div class="space-6"></div>

      <div class="profile-social-links align-center">
        <button v-on:click="edit(teacher)" class="btn btn-xs btn-info">
          <i class="ace-icon fa fa-pencil bigger-120"></i>
        </button>
        &nbsp;
        <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
          <i class="ace-icon fa fa-trash-o bigger-120"></i>
        </button>
      </div>

      <div class="hr hr16 dotted"></div>

    </div>
  </div>
  <!-- 分页插件 -->
  <pagination ref="paginationRef" :list="getTeacherList"/>

  <!-- Modal -->
  <div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">表单</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">姓名</label>
              <div class="col-sm-10">
                <input v-model="teacher.name" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">昵称</label>
              <div class="col-sm-10">
                <input v-model="teacher.nickname" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">头像</label>
              <div class="col-sm-10">
                <BigFile
                    :suffixs="['jpg', 'jpeg', 'png']"
                    text="上传头像"
                    :afterUpload="afterUpload"
                    :input-id="'image-upload'"
                    :use="FILE_TYPE.TEACHER.key"
                    url="admin/upload">
                </BigFile>
                <!-- 头像预览 -->
                <div v-show="teacher.image" class="row">
                  <div class="col-md-2">
                    <img :src="teacher.image" class="img-responsive">
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">职位</label>
              <div class="col-sm-10">
                <input v-model="teacher.position" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">座右铭</label>
              <div class="col-sm-10">
                <input v-model="teacher.motto" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">简介</label>
              <div class="col-sm-10">
                <textarea v-model="teacher.intro" class="form-control" rows="5"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button @click="saveTeacher" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {onMounted, ref} from "vue";
import pagination from "@/components/pagination";
import BigFile from "@/components/big-file";

export default {
  name: "Teacher",
  components: {
    pagination,
    BigFile
  },
  setup() {
    // teachers 数组
    const teachers = ref([]);
    const teacher = ref({}); // 保存讲师表单
    const paginationRef = ref(null);
    const FILE_TYPE = FILE_USE; // 文件上传用途

    // 刷新
    const refresh = () => {
      getTeacherList(1);
    }

    // 获取讲师列表
    const getTeacherList = (page) => {
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/business/admin/teacher/list",
          {
            page: page,
            size: paginationRef.value.size
          }
      ).then((response) => {
        Loading.hide();
        const resp = response.data;
        teachers.value = resp.content.list;
        paginationRef.value.render(page, resp.content.total);
      })
    }

    // 保存讲师
    const saveTeacher = () => {
      // 保存参数校验
      if (1 != 1
          || !Validator.require(teacher.value.name, "姓名")
          || !Validator.length(teacher.value.name, "姓名", 1, 50)
          || !Validator.length(teacher.value.nickname, "昵称", 1, 50)
          || !Validator.length(teacher.value.image, "头像", 1, 100)
          || !Validator.length(teacher.value.position, "职位", 1, 50)
          || !Validator.length(teacher.value.motto, "座右铭", 1, 50)
          || !Validator.length(teacher.value.intro, "简介", 1, 500)
      ) {
        return;
      }

      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/business/admin/teacher/save", teacher.value).then((response) => {
        const resp = response.data;
        if (resp.success) {
          Loading.hide();
          $('#form-modal').modal('hide');
          Toast.success("保存成功");
          getTeacherList(1);
        } else {
          Loading.hide();
          $('#form-modal').modal('hide');
          Toast.warning(resp.message);
        }
      })
    }

    // 删除讲师
    const del = (id) => {
      Confirm.show("删除后不可恢复，确认删除？", function () {
        Loading.show();
        axios.delete(process.env.VUE_APP_SERVER + "/business/admin/teacher/delete/" + id).then((response) => {
          const resp = response.data;
          if (resp.success) {
            //$('#form-modal').modal('hide');
            getTeacherList(1);
          }
        })
        Toast.success("删除成功");
      })
    }

    // 添加讲师
    const add = () => {
      teacher.value = {};
      $('#form-modal').modal('show');
    }

    // 修改讲师
    const edit = (param) => {
      // 方法一
      //teacher.value = JSON.parse(JSON.stringify(param));
      // 方法二
      teacher.value = $.extend({}, param);
      $('#form-modal').modal('show');
    }

    /**
     * 头像上传成功回调
     */
    const afterUpload = (file) => {
      teacher.value.image = file.path;
    }

    // 初始加载第一页
    onMounted(() => {
      getTeacherList(1);
    })

    return {
      teachers,
      refresh,
      paginationRef,
      getTeacherList,
      add,
      saveTeacher,
      teacher,
      edit,
      del,
      afterUpload,
      FILE_TYPE,
    }
  }
}
</script>

<style scoped>

</style>